<template>
  <div>
    <my-header title="购物车案例"></my-header>
    <div class="goods">
      <my-goods
        v-for="item in list"
        :key="item.goods_id"
        :goods="item"
      ></my-goods>
    </div>
    <my-footer :list="list"></my-footer>
  </div>
</template>
<script>
import MyHeader from "./components/MyHeader.vue";
import MyGoods from "./components/MyGoods.vue";
import MyFooter from "./components/MyFooter.vue";
export default {
  components: { MyHeader, MyGoods, MyFooter },
  data() {
    return {
      list: [], // 商品所有数据
    };
  },
  methods: {
    async getGoods() {
      const { data: res } = await this.$http.get("/api/cart");
      this.list = res.list;
    },
  },
  created() {
    this.getGoods();
  },
};
</script>

<style scoped>
.goods {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
